<template>
  <div>
    <el-collapse-transition>
      <div v-if="!isShowDetail" class="app-main-content-box">
        <!--顶部-->
        <div class="top">
          <div class="app-main-top-box">
            <el-form
              ref="formInlineRef"
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
            >
              <el-form-item label="用户openid">
                <el-input
                  v-model="formInline.maOpenId"
                  placeholder="请输入用户openid"
                />
              </el-form-item>
              <el-form-item label="手机号">
                <el-input
                  v-model="formInline.phone"
                  placeholder="请输入码牌绑定手机号"
                />
              </el-form-item>
              <el-form-item label="码牌编号">
                <el-input
                  v-model="formInline.deviceNo"
                  placeholder="请输入码牌编号"
                />
              </el-form-item>
              <el-form-item label="上报时间">
                <el-date-picker
                  v-model="createTime"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  placeholder="请选择上报时间"
                  value-format="yyyy-MM-dd HH:mm:ss"
                />
              </el-form-item>
              <el-form-item label="业务类型">
                <el-select
                  v-model="formInline.opType"
                  placeholder="请选择业务类型"
                >
                  <el-option
                    v-for="(item, index) in businessTypeOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="结果">
                <el-select v-model="formInline.status" placeholder="请选择结果">
                  <el-option
                    v-for="(item, index) in resultOption"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button type="primary" @click="onReset">重置</el-button>
                <el-button type="primary" @click="onReport">导出</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="content">
          <table-panel
            :table-head="tableHead"
            :table-data="tableData"
            height="60vh"
          >
            <template slot="footer">
              <!--分页器-->
              <pagination-direction
                :config="paginationConfig"
                @sizeschange="sizesChange"
                @pagechange="pageChange"
              />
            </template>
          </table-panel>
        </div>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
import TablePanel from '@/components/TablePanel'
import {
  export_wifi_operate_Record,
  getWiFiRecordList
} from '@/publicApi/publicDomain'
import {
  EVENT_TRACK_EVENT_OF_RESULT_FOR_WIFI,
  EVENT_TRACK_TYPE_OF_BUSINESS_FOR_WIFI
} from '@/publicViews/dataReport/views/WiFiDataReport/const'
import { mapGetters } from 'vuex'
export default {
  components: { TablePanel },
  data() {
    return {
      tableHead: [
        {
          label: '用户openid',
          prop: 'maOpenId'
        },
        {
          label: '手机号',
          prop: 'phone'
        },
        {
          label: '机型',
          prop: 'phoneTypeName'
        },
        {
          label: '系统版本',
          prop: 'phoneSystemVersion'
        },
        {
          label: '微信版本',
          prop: 'wxVersion'
        },
        {
          label: '业务类型',
          prop: 'opType'
        },
        {
          label: '码牌编号',
          prop: 'deviceNo'
        },
        {
          label: '关联门店',
          prop: 'pubDomainShopName'
        },
        {
          label: 'WiFi名称',
          prop: 'wifiName'
        },
        {
          label: 'WiFi密码',
          prop: 'wifiPassword'
        },
        {
          label: '上报时间',
          prop: 'createTime'
        },
        {
          label: '结果',
          prop: 'status'
        },
        {
          label: '备注',
          prop: 'failReason',
          minWidth: 200
        }
      ],
      tableData: [],
      /* 分页 */
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [5, 10, 20, 50, 100], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      formInline: {
        maOpenId: '',
        phone: '',
        deviceNo: '',
        opType: '',
        status: '',
        beginDay: '',
        endDay: ''
      },
      createTime: [],
      showDialogAddCouponTask: false,
      isShowDetail: false,
      resultOption: [],
      businessTypeOptions: []
    }
  },
  watch: {
    createTime(val) {
      if (val) {
        this.formInline.beginDay = val[0]
        this.formInline.endDay = val[1]
      }
    }
  },

  computed: {
    ...mapGetters(['fileBaseUrl'])
  },
  created() {
    this.fetchData()
    for (const argumentsKey in EVENT_TRACK_EVENT_OF_RESULT_FOR_WIFI) {
      this.resultOption.push({
        label: EVENT_TRACK_EVENT_OF_RESULT_FOR_WIFI[argumentsKey],
        value: argumentsKey
      })
    }
    this.resultOption.unshift({
      label: '全部',
      value: ''
    })
    for (const argumentsKey in EVENT_TRACK_TYPE_OF_BUSINESS_FOR_WIFI) {
      this.businessTypeOptions.push({
        label: EVENT_TRACK_TYPE_OF_BUSINESS_FOR_WIFI[argumentsKey],
        value: argumentsKey
      })
    }
    this.businessTypeOptions.unshift({
      label: '全部',
      value: ''
    })
  },
  methods: {
    async fetchData() {
      const {
        data: { list, total }
      } = await getWiFiRecordList({
        page: this.paginationConfig.page, // 页数-默认1
        pageSize: this.paginationConfig.pageSize, // 每页条数-默认10
        sort: 0,
        ...this.formInline
      })
      if (list.length > 0) {
        list.map((v) => {
          v.status = EVENT_TRACK_EVENT_OF_RESULT_FOR_WIFI[v.status]
          v.pubDomainShopName = v.pubDomainShopName?.replace('-绑定成功', '')
          v.opType = EVENT_TRACK_TYPE_OF_BUSINESS_FOR_WIFI[v.opType]
          for (const vKey in v) {
            if (!v[vKey]) v[vKey] = '-'
          }
        })
      }
      this.tableData = list
      this.paginationConfig.total = total
    },
    handleAddTask() {
      this.showDialogAddCouponTask = true
    },
    // 分页sizes改变
    sizesChange() {
      this.fetchData()
    },
    // 分页page改变
    pageChange() {
      this.fetchData()
    },
    onSubmit() {
      this.fetchData()
    },
    onReset() {
      this.createTime = []
      this.formInline = {
        maOpenId: '',
        phone: '',
        deviceNo: '',
        opType: '',
        status: '',
        beginDay: '',
        endDay: ''
      }
      this.paginationConfig.page = 1
      this.paginationConfig.pageSize = 10
      this.$nextTick(() => {
        this.fetchData()
      })
    },
    async onReport() {
      const res = await export_wifi_operate_Record({})
      if (res.data) {
        const queryArr = process.env.VUE_APP_BASE_API.split('')
        var alink = document.createElement('a')
        alink.href = `${process.env.VUE_APP_BASE_API}${
          queryArr[queryArr.length - 1] == '/' ? '' : '/'
        }statistics_admin/task/download?taskId=${res.data}&X-BUSINESS-TOKEN=${
          this.$store.state.user.token
        }`
        alink.download = `wifi-operate-record-${res.data}.xlsx`
        alink.click()
      }
    }
  }
}
</script>

<style scoped></style>
